<template>
  <div class="dialog">
    <el-form ref="result" :model="result" :rules="formRules">
      <el-form-item v-for="(item,key) in displayTemplate" :key="key" label-width="10rem" :label="item.name || key" :prop="key">
        <el-input v-if="item.text" v-model="result[item.bindkey]" :readonly="item.readonly" auto-complete="off" />
        <el-switch v-else-if="item.bool" v-model="result[item.bindkey]" :disabled="item.readonly" />
        <el-select v-else-if="item.list" v-model="result[item.bindkey]" :disabled="item.readonly">
          <el-option v-for="option in options[key]" :key="option.uid" :value="option.uid" :label="option.name" />
        </el-select>
        <span v-else>{{ result[key] }}</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="submit('result',result)">确 定</el-button>
      <el-button type="primary" @click="$emit('cancel', $event)">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'EditModel',
  props: {
    data: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {
      defaultInput: '---请输入---',
      defaultOption: { uid: null, value: null, name: '---请选择---' },
      itemOptions: [],
      targetOptions: [],
      originOptions: [],
      result: { ...this.data },
      formRules: {
        name: [{ required: true, message: '请输入名称' }, {
          validator: function(rule, value, callback) {
            if (value.indexOf('.') !== -1) {
              callback(new Error('名称中不能出现小数点'))
            } else {
              callback()
            }
          }
        }],
        id: [{ required: true, message: '请输入身份标识' }],
        value: [{ required: true, message: '请输入属性值' }]
      }
    }
  },
  computed: {
    ...mapState({
      service: state => state.service
    }),
    ...mapState('systemProfile', {
      display: state => state.display,
      category: state => state.category,
      info: state => state.info,
      infoset: state => state.infoset,
      relation: state => state.relation
    }),
    displayTemplate() {
      let keys = Object.keys(this.data)
      if (this.options.infoset_name.length === 0) {
        keys = keys.filter(item => item !== 'infoset_name' && item !== 'infoset_uid')
      } else if (keys.indexOf('infoset_uid') !== -1) {
        keys = keys.filter(item => item !== 'value')
      }
      return keys.reduce((result, key) => (
        this.display[key] && this.display[key].show
          ? { ...result, [key]: this.display[key] }
          : result), {})
    },
    options() {
      return {
        category_name: this.category,
        info_name: this.info.filter(item => item.category_uid === this.result.category_uid),
        infoset_name: this.infoset.filter(item => item.info_uid === this.result.info_uid),
        relation_name: this.relation,
        item_name: this.itemOptions,
        parent_name: [this.defaultOption, ...this.itemOptions.filter(item => item.uid !== this.result.uid)],
        previous_name: [this.defaultOption, ...this.itemOptions.filter(item => item.uid !== this.result.uid)],
        target_name: this.targetOptions,
        origin_name: this.originOptions
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      await this.getOptions()
    },
    async getOptions() {
      if (this.data) {
        let result = {}
        if (this.data.category_uid) {
          result = await this.service.getCi({ category_uid: this.data.category_uid })
          if (result.flag && result.data) {
            this.itemOptions = result.data
          }
        } else if (this.data.relation_uid) {
          const relation = this.relation.find(item => item.relation_uid === this.data.relation_uid)
          result = await this.service.getCi({ category_uid: relation.target_uid })
          if (result.flag && result.data) {
            this.targetOptions = result.data
          }
          result = await this.service.getCi({ category_uid: relation.origin_uid })
          if (result.flag && result.data) {
            this.originOptions = result.data
          }
        } else {
          this.targetOptions = this.category
          this.originOptions = this.category
        }
      }
    },
    submit(form, data) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$emit('submit', data)
        } else {
          this.$message.error('请按要求填写！')
          return false
        }
      })
    }
  }
}
</script>
